<template>
  <my-select v-model="user" value-key="id" clearable filterable v-bind="$attrs">
    <el-option-group
      v-for="group in dataList"
      :key="group.id"
      :label="group.label"
      >
      <el-option
        v-for="item in group.children"
        :key="item.id"
        :label="item.label"
        :disabled="item.id == disabledId"
        :value="item">
      </el-option>
    </el-option-group>
  </my-select>
</template>

<script>
  import {
  	deptUserTree,
  } from "@/api/system/notice";
  export default{
    name:'userSelect',
    props:{
      value:{
        type:String|Number,
        required:true
      },
      disabledId:{
        type:String|Number
      }
    },
    data(){
      return{
        dataList:[],
        name:''
      }
    },
    computed:{
      user:{
        get(){
          return this.value ? {'id':this.value,'label':this.name} : null
        },
        set(value){
          this.name = value.label
          this.$emit('input',value.id)
          this.$emit('change',value)
        }
      }
    },
    created(){
      this.init()
    },
    methods:{
      init(){
        this.getDeptUserTree()
      },
      handleData(list){
        let head = {
          id:0,
          label:'系统管理员',
          parentId:100,
          weight:10000,
          children:[]
        }
        this.dataList =  list.reduce((pre,cur)=>{
          cur.children ? pre.push(cur) : pre[0].children.push(cur)
          return pre;
        },[head])
      },
      // 查询部门和用户下拉树结构
      getDeptUserTree() {
        deptUserTree().then(response => {
          this.handleData(response.data[0].children)
        });
      },
    }
  }
</script>

<style>
</style>
